// 分列
.col2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  // column-gap: 1vw;
}

.col3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  // column-gap: 1vw;
}

.col4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  // column-gap: 1vw;
}

.col5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  // column-gap: 1vw;
}

.col6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  // column-gap: 1vw;
}

// flex 布局
.fc {
  display: flex;
  justify-content: center;
  align-items: center;
}

.fcd {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.fb {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fbd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}

.fa {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.fs {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.fe {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.mt10 {
  margin-top: .10rem;
}

.mt24 {
  margin-top: .24rem;
}

.mt30 {
  margin-top: .3rem;
}

.mt40 {
  margin-top: .4rem;
}

.mt60 {
  margin-top: .6rem;
}

.mt80 {
  margin-top: .80rem;
}

.ml24 {
  margin-left: .24rem;
}

.mr24 {
  margin-right: .24rem;
}

.mb24 {
  margin-bottom: .24rem;
}

.fr {
  float: right;
}

.fl {
  float: left;
}

//电子数字字体
@font-face {
  font-family: "electronicFont";
  src: url("./assets/font/UnidreamLED.ttf") format("truetype");
  /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  font-weight: normal;
  font-style: normal;
}

//二屏数字字体
@font-face {
  font-family: "fzpschjwFont";
  src: url("./assets/font/FZPSCHJW.TTF") format("truetype");
  /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  font-weight: normal;
  font-style: normal;
}

//二屏大字字体
@font-face {
  font-family: "fzcchkFont";
  src: url("./assets/font/FZCCHK.TTF") format("truetype");
  /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  font-weight: normal;
  font-style: normal;
}

/*
*透明度动画
* @param  @keyframes	规定动画。
* @param  animation	 所有动画属性的简写属性，除了 animation-play-state 属性。
* @param  animation-name	规定 @keyframes 动画的名称。
* @param  animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
* @param  animation-timing-function 	规定动画的速度曲线。默认是 "ease"。
* @param  animation-delay	 规定动画何时开始。默认是 0。
* @param  animation-iteration-count	 规定动画被播放的次数。默认是 1。infinite无限。
* @param  animation-direction	 规定动画是否在下一周期逆向地播放。默认是 "normal"。
* @param  animation-play-state	 规定动画是否正在运行或暂停。默认是 "running"。
* @param  animation-fill-mode	 规定对象动画时间之外的状态。
* 简写  animation: example 5s linear 2s infinite alternate
*/

@keyframes opacity {
  0% {
    opacity: 0.7;
  }

  25% {
    opacity: 0.9;
  }

  50% {
    opacity: 1;
  }

  75% {
    opacity: 0.9;
  }

  100% {
    opacity: 0.7;
  }
}

.changeOpacity {
  animation-name: opacity;
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

/*
*渐隐渐现动画
*/
@keyframes fadeIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-.25rem, 0, 0);
    transform: translate3d(-.25rem, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}

@keyframes test {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(.25rem, 0, 0);
    transform: translate3d(.25rem, 0, 0);
  }

  90% {
    opacity: 0.8;
    -webkit-transform: translate3d(9.00rem, 0, 0);
    transform: translate3d(9.00rem, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate3d(12.00rem, 0, 0);
    transform: translate3d(12.00rem, 0, 0);
  }
}

.test {
  -webkit-animation-name: test;
  animation-name: test;
  animation-duration: 10s;
  animation-timing-function: steps(3, start);
}